<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "882f1258932b53d2dd71f0e60fc44951", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Map3D"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: "1.3.2", // Loca 版本，缺省 1.3.2
        },
      })
        .then((AMap) => {
          /*this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          }); */
          this.map = new AMap.Map("container", {
            features: ["bg", "road"],
            mapStyle: "amap://styles/dark",
            center: [121.564862, 31.194251],
            pitch: 56,
            zoom: 11,
            viewMode: "3D",
          });

          var map = this.map;
          var layer = new Loca.HeatmapLayer({
            map: map,
          });

          /* $.get(
            "//a.amap.com/Loca/static/mock/sh_road_heat.json",
            function (datas) {
              layer.setData(datas, {
                lnglat: function (data) {
                  return [data.value.lng, data.value.lat];
                },
                value: "queue_len",
              });

              layer
                .setOptions({
                  style: {
                    radius: 18,
                    color: {
                      0.5: "#2c7bb6",
                      0.65: "#abd9e9",
                      0.7: "#ffffbf",
                      0.9: "#fde468",
                      1.0: "#d7191c",
                    },
                  },
                })
                .render();
            }
          );
           */
          axios
            .get("//a.amap.com/Loca/static/mock/sh_road_heat.json")
            .then(function (datas) {
              // console.log(datas);
              let data=datas.data;
              layer.setData(data, {
                lnglat: function (data) {
                  return [data.value.lng, data.value.lat];
                },
                value: "queue_len",
              });

              layer
                .setOptions({
                  style: {
                    radius: 18,
                    color: {
                      0.5: "#2c7bb6",
                      0.65: "#abd9e9",
                      0.7: "#ffffbf",
                      0.9: "#fde468",
                      1.0: "#d7191c",
                    },
                  },
                })
                .render();
            });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>
<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 671px;
}
</style>
